<template>
  <div class="map-page">
    <img class="img-bg" src="@/assets/cockpit/subdivision/co-map-1.jpg" alt="" />
    <div class="map-left-menu">
      <div class="co-title-select">
        <el-select v-model="selectedValue" placeholder="请选择" :popper-append-to-body="false">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </div>
      <!-- <ul class="co-menu-list">
        <li v-for="item in menuList" :key="item.id">{{ item.name }}</li>
      </ul> -->
    </div>

    <div class="map-right-menu">
      <div class="title-style">
        <div class="blue-icon"></div>
        <div class="yellow-icon"></div>
        国土空间总体格局
      </div>
      <div class="right-menu-content">
        <div class="com-title-style">
          <div class="title-line">
            <img src="@/assets/cockpit/subdivision/co-title-yellow.png" alt="" />
          </div>
          <div>一轴一带四廊</div>
        </div>
        <p class="text-content">
          湘江综合服务轴；长浏宁城镇发展带；东岸城乡融 合发展走廊、西岸城乡融合发展走廊 、南部城乡融
          合发展走廊、北部城乡融合发展走廊。
        </p>
        <div class="com-title-style">
          <div class="title-line">
            <img src="@/assets/cockpit/subdivision/co-title-blue.png" alt="" />
          </div>
          <div>一核两副十片</div>
        </div>
        <p class="text-content">
          主城核心区；浏阳城区、宁乡城区；星沙松雅湖片、 空铁片、金霞片、望城大泽湖片、梅溪湖西片、大王
          山片、南部融城片、金洲新城片、金阳新城片、铜官 新城片十大城市发展片区。
        </p>
        <div class="com-title-style">
          <div class="title-line">
            <img src="@/assets/cockpit/subdivision/co-title-yellow.png" alt="" />
          </div>
          <div>一脉两屏六楔</div>
        </div>
        <p class="text-content">
          湘江及其支流构建完整的河网水系脉络，东部幕阜山 -连云山-九岭山和西部沩山构建的东西生态屏障；东
          部和西部生态屏障延展形成的六条深入城区的生态绿 楔。
        </p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'

@Component({
  name: 'MapMenu',
  components: {}
})
export default class MapMenu extends Vue {
  private selectedValue = ''
  private options = [
    // {
    //   value: '1',
    //   label: '总体规划'
    // }
    {
      value: 1,
      label: '国土空间总体格局'
    },
    {
      value: 2,
      label: '三区三线'
    },
    {
      value: 3,
      label: '中心城区格局'
    },
    {
      value: 4,
      label: '城乡公园体系'
    },
    {
      value: 5,
      label: '绿色交通体统'
    },
    {
      value: 6,
      label: '眺望系统'
    },
    {
      value: 7,
      label: '科技创新高地'
    }
  ]
  private menuList = [
    {
      id: 1,
      name: '国土空间总体格局'
    },
    {
      id: 2,
      name: '三区三线'
    },
    {
      id: 3,
      name: '中心城区格局'
    },
    {
      id: 4,
      name: '城乡公园体系'
    },
    {
      id: 5,
      name: '绿色交通体统'
    },
    {
      id: 6,
      name: '眺望系统'
    },
    {
      id: 7,
      name: '科技创新高地'
    }
  ]
}
</script>
<style lang="scss" scoped>
@import '~@/styles/cockpit.scss';
.map-page {
  width: 100%;
  height: 100%;
  // background: red!important;
  background-color: #042c63;
  .img-bg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .map-left-menu {
    position: absolute;
    left: 12px;
    top: 12px;
    .co-menu-list {
      width: 188.1px;
      height: 300.04px;
      background: rgba(0, 33, 96, 0.9);
      border: 1px solid #3767b6;
      margin-top: 12px;

      li {
        width: 164px;
        height: 29px;
        line-height: 29px;
        background: url('~@/assets/cockpit/co-title-select.png') no-repeat 0/ 100% 100%;
        border: none;
        font-size: 12px !important;
        color: #fff;
        padding-left: 8px;
        margin-top: 12px;
        margin-left: 12px;
      }
    }
  }

  .map-right-menu {
    position: absolute;
    right: 12px;
    bottom: 12px;
    color: #fff;
    width: 300px;
    height: 344px;

    background: url('~@/assets/cockpit/subdivision/co-map-menu-bg.png') no-repeat 0/ 100% 100%;

    .title-style {
      display: flex;
      font-size: 16px !important;
      text-align: left;
      color: #fff;
      text-shadow: 0 0 4px #006aff;
      margin: 26px 0 0 12px;
      .blue-icon {
        width: 4px;
        height: 4px;
        margin-top: 9px;
        margin-right: 6px;
        display: block;
        background: #00eaff;
        border-radius: 1px;
        box-shadow: 0 0 4px 1px #0095ff;
        transform: rotate(45deg);
      }
      .yellow-icon {
        width: 4px;
        height: 4px;
        margin-top: 9px;
        margin-right: 6px;
        display: block;
        background: #f9f0d4;
        border-radius: 1px;
        box-shadow: 0 0 4px 1px #f0b04a;
        transform: rotate(45deg);
      }
    }
    .right-menu-content {
      padding: 12px;

      .com-title-style {
        color: #bffeff;
        display: flex;
        font-size: 12px !important;
        .title-line {
          width: 40px;
          margin-top: -7px;
          img {
            display: block;
            width: 100%;
          }
        }
      }
      .text-content {
        font-size: 12px !important;
        line-height: 16px;
        margin-bottom: 16px;
      }
    }
  }
}
</style>
